import React, {Component} from 'react'
import {Redirect, Route, Switch} from 'react-router'
import ContentComponent from './contentComponent'
import '../../static/scss/common/managementFrame.scss'
import commonConfig from '../../static/js/commonConfig'

class ManagementFrame extends Component {
    state = {
        currentPath: ''
    }

    componentDidMount() {
        const {navList, defaultPath} = this.props;
        this.setState({currentPath: commonConfig.getCurrentNavActive(navList, defaultPath || '')})
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    redirectHandle = item => {
        const {type} = this.props;
        commonConfig.redirectPage(this, type + '/' + item.path);
    }

    render() {
        const {currentPath} = this.state;
        const {routeList, type, navList} = this.props;
        return (
            <>
                <ContentComponent>
                    <div className="management_frame_module">
                        <div className="left_panel_section">
                            <ul>
                                {navList.map((item, i) =>
                                    <li key={i} className={currentPath === item.path ? 'active' : ''}
                                        onClick={this.redirectHandle.bind(this, item)}>{item.name}</li>
                                )}
                            </ul>
                        </div>
                        <div className="right_content_section">
                            <Switch>
                                <Route path={`/view/${type}`} exact // view/dataCenter/resourceInventory
                                       render={() => <Redirect to={`/view/${type}/${routeList[0].name}`}/>}/>
                                {routeList.map((item, i) =>
                                    <Route key={i} path={`/view/${type}/` + item.name}
                                           component={props => <item.component {...props}/>}/>
                                )}
                            </Switch>
                        </div>
                    </div>
                </ContentComponent>
            </>
        )
    }
}

export default ManagementFrame;